<template>
    <!-- vue3页面 -->
    
        <div class="header_wrap">
            <el-row>
                <el-col :span="2">
                    <div @click="handleCollapse" class="iconCo">
                        <el-icon v-if="!isCollapse"><Sunny /></el-icon>
                        <el-icon v-if="isCollapse"><Moon /></el-icon>
                    </div>
                </el-col>
                <el-col :span="18" class="textLeft">
                    <span class="header_text">人的内心不种满鲜花就会长满杂草</span>
                </el-col>
                <el-col :span="4" style="textRight">
                    <span class="header_text">山鸟</span>
                    <el-button size="small" color="#9c3939" @click="backLogin">退出</el-button>
                </el-col>
            </el-row>
        </div>
</template>

<script lang='ts'>
import { defineComponent, provide, reactive, ref } from 'vue'
import {useRouter} from 'vue-router'

export default defineComponent({
    name: 'Theader',
    setup(props,ctx) {
        const isCollapse = ref(false)
        const handleCollapse =()=>{
            isCollapse.value=!isCollapse.value
            console.log(isCollapse.value)
            ctx.emit('handleCollapse',isCollapse.value)
        }
        const router = useRouter()
        const backLogin = ()=>{
            router.push('/')
        }
        return {
            isCollapse,
            handleCollapse,
            backLogin
        }
    }
})
</script>

<style scoped>
.header_wrap{
    height: 100%;
    width: 100%;
    background: #111422;
    color: #dedede;
    line-height: 60px;
}
.header_text{
    font-size: 12px;
    margin-right: 1vw;
}
.textLeft{
    text-align:left;
    padding-right:3vw
}
.textRight{
    text-align:right;
    padding-right:3vw
}
.iconCo{
    font-size: 16px;
    cursor: pointer;
}
</style>